/**
 * 自定义表格组件
 */
Vue.component('show-data-table', {
    /**
     * 列
     */
    props: {
        columns: {
            type: Array,
            default: [],
        },
        data: {
            type: Array,
            default:()=>[],
        },
    },
    template: `<el-table
  :data="data"
  tooltip-effect="dark"
  style="width: 100%"
  border
>
  <template v-for="column in columns">

    <el-table-column
      :type="column.type"
      :prop="column.prop"
      :label="column.title"
      :align="column.align"
      :sortable="column.sortable"
      :width="column.width"
      :formatter="column.formatter"
      v-if="column.customComponent"
    >
      <!--suppress HtmlUnknownAttribute -->
      <template #default="scope" >
        <!--这里将传递给模板当前行的数据-->
        <slot
          :name="humpToLine(column.prop)"
          :row="scope.row"
        ></slot>
      </template>
    </el-table-column>
    <el-table-column
      :type="column.type"
      :prop="column.prop"
      :label="column.title"
      :align="column.align"
      :sortable="column.sortable"
      :width="column.width"
      :formatter="column.formatter"
      v-else
    >
    </el-table-column>
  </template>

</el-table>`,
    methods: {
        humpToLine(data) {
            return toLine(data)
        },

    },
})


/**
 * 驼峰转换下划线
 * @param name
 * @returns {string}
 */
function toLine(name) {
    return name.replace(/([A-Z])/g, '_$1').toLowerCase()
}